<template>
  <div>
    <!-- max-width:750px; 此宽度用于整体页面固定时-->
    <scroller v-show="!isWeChar" :lock-x="true" :lock-y="true" style="width:100%;height:46px;z-index:2;">
      <div class="order__head">
        <x-header>
          <div slot="default" class="common__header--title">历史赔案</div>
          <div @click="goBack" slot="overwrite-left" class="common__header--img">
            <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
          </div>
        </x-header>
      </div>
    </scroller>
    <group class="history__row" v-for="(item,index) in claimList" :key="index">
      <!--  -->
      <cell :border-intent="false" @click.native="showContent(index)">
        <!-- 左图标区 -->
        <!-- <div slot="icon" class="history__row_icon" style="display:block;margin-right:5px;">
          <div>
            <img src="~assets/x3/ico/icon-home.png">
          </div>
          <div>
            赔案详情
          </div>
        </div> -->
        <!-- 右数据区 -->
        <div slot="title" class="history__row_title" style="display:block;margin-right:5px;">
          <div style="width:100%;height: 90px;">
            <div>
              <label>赔案号</label>
              <span>{{item.claimNo}}&nbsp&nbsp&nbsp</span>
            </div>
            <div>
              <label>报案时间</label>
              <span>{{item.accidentTime}}&nbsp&nbsp&nbsp</span>
            </div>
            <div>
              <label>保单号</label>
              <span>{{item.policyNo}}&nbsp&nbsp&nbsp</span>
            </div>
          </div>
          <div class="hist-flow">
            <flow>

              <flow-state state="1" is-done>
                <span slot="title">报案</span>
              </flow-state>
              <flow-line v-show="item.cliaimsType.openIsDone" is-done></flow-line>
              <flow-line v-show="!item.cliaimsType.openIsDone"></flow-line>

              <flow-state state="2" v-show="item.cliaimsType.openIsDone" is-done>
                <span slot="title">理赔中</span>
              </flow-state>
              <flow-state state="2" v-show="!item.cliaimsType.openIsDone">
                <span slot="title">理赔中</span>
              </flow-state>

              <flow-line v-show="item.cliaimsType.closeIsDone" is-done></flow-line>
              <flow-line v-show="!item.cliaimsType.closeIsDone"></flow-line>

              <flow-state v-show="item.cliaimsType.closeIsDone" state="3" is-done>
                <span slot="title">完成</span>
              </flow-state>
              <flow-state v-show="!item.cliaimsType.closeIsDone" state="3">
                <span slot="title">完成</span>
              </flow-state>

              <flow-line v-show="item.cliaimsType.newIsDone&&item.cliaimsType.isReTest" is-done></flow-line>
              <flow-line v-show="!item.cliaimsType.newIsDone&&item.cliaimsType.isReTest"></flow-line>

              <flow-state v-show="item.cliaimsType.newIsDone&&item.cliaimsType.isReTest" state="4" is-done>
                <span slot="title">重开</span>
              </flow-state>
              <flow-state v-show="!item.cliaimsType.newIsDone&&item.cliaimsType.isReTest" state="4">
                <span slot="title">重开</span>
              </flow-state>
            </flow>
          </div>
          <!-- <div>
            <label>案件状态</label>
            <span>{{item.status="0" ? "关闭" : "成功"}}</span>
          </div> -->
        </div>
        <!-- 右箭头 -->
        <div :id="'ico_right'+index">
          <img src="~assets/x3/ico/more-right.png" width="15">
        </div>
      </cell>
      <!-- 详情 -->
      <div class="history__row_slide" :id="'content'+index">
        <!-- <p>
          <label>报案号</label>
          <span>{{item.claimNo}}</span>
        </p>
        <p>
          <label>报案时间</label>
          <span>{{item.accidentTime | filter_time_full}}</span>
        </p>
        <p>
          <label>保单号</label>
          <span>{{item.policyNo}}</span>
        </p> -->
        <p>
          <label>投保人</label>
          <span>{{item.insuredName}}</span>
        </p>
        <p>
          <label>提交时间</label>
          <span>{{item.registerTime }}</span>
        </p>
        <p>
          <label>通知时间</label>
          <span>{{item.noticeTime }}</span>
        </p>
        <p>
          <label>损失地点</label>
          <span>{{item.accidentPlace}}</span>
        </p>
        <p>
          <label>损失原因</label>
          <span>{{item.accidentDesc}}</span>
        </p>
        <p>
          <label>报案环节备注</label>
          <span>{{item.modifyRemark}}</span>
        </p>
        <p>
          <label>赔付金额</label>
          <span>{{item.paidAmount}}元</span>
        </p>
        <p>
          <label>总费用</label>
          <span>{{item.totalCost}}元</span>
        </p>
      </div>
    </group>
    <div v-show="claimList.length==0" class="noMore-Rc">没有更多赔案了</div>
    <div class="policyList__footer">
      <div @click="findRc"><img style="width: 15px;" src="~assets/x3/ico/icon_find.png">&nbsp&nbsp查询其他保单</div>
    </div>
    <div style="height: 70px;"></div>
  </div>
</template>
<script>
import { XHeader, Scroller, Group, Cell, XInput, Flow, FlowState, FlowLine } from "vux";
import { mapState, mapActions } from "vuex";
import { Mutations, RouteUrl } from "src/common/const";
import DateUtil from 'src/common/util/dateUtil';
export default {
  components: { XHeader, Scroller, Group, Cell, XInput, Flow, FlowState, FlowLine },
  computed: mapState(["user", "isWeChar", "order"]),
  data() {
    return {
      claimList: [],
      isShow: false
    };
  },
  filters: {
    filter_time(value) {
      return DateUtil.getDateStr_YmdByTs(value);
    },
    filter_time_full(value) {
      return DateUtil.getDateStr_YmdhmsByTs(value);
    }
  },
  methods: {
    findRc() {
      this.$common.goUrl(this, RouteUrl.ID_CAR_AUTHENTICATION);
    },
    showContent(index) {
      if ($("#content" + index).hasClass("animate")) {
        $("#content" + index).removeClass("animate");
        $("#ico_right" + index + " img").attr("src", require("src/assets/x3/ico/more-right.png"));
      } else {
        $("#content" + index).addClass("animate");
        $("#ico_right" + index + " img").attr("src", require("src/assets/x3/ico/more-down.png"));
      }
      // this.isShow = !this.isShow;
    },
    goBack() {
      this.$common.goBack(this);
    },
    beforeRouteEnter(to, from, next) {
      next();
    }
  },
  mounted() {
    document.title = "赔案查询";
    this.$init.subPageInit(this);
    if (!this.$common.isEmpty(this.order) && !this.$common.isEmpty(this.order.claimList) && this.order.claimList.length > 0) {
      this.claimList = this.order.claimList;
    }
    console.log(this.order);
  }
}
</script>

<style lang="scss">
// .history__row {
//   padding: 5px 10px;
// }
//group
.history__row .weui-cell {
  padding: 0px 8px 0px 0px;
  box-shadow: 0px 0px 10px 1px #efefef;
}
.noMore-Rc {
  opacity: 1;
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 16px;
  line-height: 60px;
  color: #aaa;
  position: relative;
}
//group的label
// .history__row .weui-cell__hd {
//   width: 15%;
//   padding: 5px 10px;
//   background-color: #ccc;
// }
//group的body
.history__row .vux-cell-bd {
  margin-left: 10px;
}

//图标区
.history__row_icon {
  width: 100%;
  font-size: 12px;
  text-align: center;
  img {
    width: 100%;
  }
}

//赔案信息
.history__row_title {
  width: 100%; // height: 60px;
  font-size: 14px;
  label {
    display: block;
    float: left;
    width: 35%;
    height: 28px;
    line-height: 28px;
    color: #777;
  }
  span {
    width: 65%;
    display: block;
    float: right; // width: 60%;
    height: 28px;
    line-height: 28px;
    color: #C8161D;
    text-align: right;
  }
}

.hist-flow {
  width: 100%;
  .weui-wepay-flow {
    padding-top: 0px;
    padding-bottom: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

//赔案详情
.history__row_slide {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
  padding: 0px 10px;
  font-size: 14px;
  p {
    display: block;
    float: left;
    width: 100%;
    line-height: 26px;
    label {
      display: block;
      float: left;
      width: 40%;
      color: #777;
    }
    span {
      display: block;
      float: right;
      width: 60%;
      max-height: max-content;
      overflow: auto;
      color: #C8161D;
    }
  }
}
.policyList__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 40px;
  background-color: #C8161D;
  div {
    color: #fff;
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
//显示
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
